<template>
  <div>
    <h3>设置偏好</h3>
    <div>
      <span>显示顺序：</span>
      <el-button
        type="primary"
        v-for="(item,index) in attributeOrder"
        :key="item.attr"
        size="small"
        @click="changeShow(item)"
        plain
      >{{index+1}}:{{item.show}}</el-button>
    </div>



    <div :int_s="int" :cloneInt_s="cloneInt">
      <div>
        <span>修改属性名：</span>
        <el-input v-model="cloneInt.show" :disabled="(cloneInt.show==null)||swi"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="saveData(int,cloneInt)">保存</el-button>
      </div>
    </div>
    <div v-for="item in attributeOrderClone" :key="item.attr">
      {{item.show}}属性：
      <input
        name="attributeOrder"
        type="checkbox"
        v-model="attributeOrderCloneTwiceL"
        :value="item"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    attributeOrder: {
      type: Array
    },
    dataAttribute: {
      type: Array
    }
  },
  data() {
    return {
      //属性顺序深克隆
      attributeOrderClone: [],
      //开关
      swis: false,
      swi: false,
      //修改属性的绑定值
      int: "",
      //设置新属性名，用来深克隆的
      cloneInt: "",
      //克隆attributeOrderClone
      attributeOrderCloneTwiceL: []
    };
  },
  watch: {
    attributeOrderCloneTwiceL() {
      this.$emit("FTableFunction", this.attributeOrderCloneTwiceL);
    }
  },
  created() {
    //深克隆数据
    this.attributeOrderClone = JSON.parse(JSON.stringify(this.attributeOrder));
    this.attributeOrderCloneTwiceL = JSON.parse(
      JSON.stringify(this.attributeOrderClone)
    );
  },
  methods: {
    //点击顺序时方法
    changeShow(item) {
      this.swi = false;
      this.int = item;
      this.cloneInt = JSON.parse(JSON.stringify(this.int));
    },
    //保存属性名
    saveData(int, cloneInt) {
      for (let i = 0; i < this.attributeOrder.length; i++) {
        if (
          cloneInt.attr == this.attributeOrder[i].attr &&
          cloneInt.show != this.attributeOrder[i].show
        ) {
          this.attributeOrder[i].show = cloneInt.show;
          this.attributeOrderCloneTwiceL[i].show = cloneInt.show;
          this.attributeOrderClone[i].show = cloneInt.show;
          this.swi = true;
        }
      }
    }
  }
};
</script>